<template>
  <div class="login-container">
    <div class="login-box">
      <div class="title">博客后台管理系统</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef"  class="login-form">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名" :prefix-icon="User" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" show-password placeholder="请输入密码" :prefix-icon="Lock" />
        </el-form-item>
        <div class="login_remember">
            <el-checkbox v-model="isRememberPW" label="记住密码" />
          </div>
        <div class="login-submit">
          <el-button type="primary" @click="handleLogin(ruleFormRef)">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from "element-plus";
import { User, Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { getUserInfo, setUserInfo, removeUserInfo, setToken } from '@/utils/index.ts';


const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  username: "",
  password: "",
});
const rules = ref<FormRules<typeof ruleForm>>({
  username: [{ required: true, message: "请输入用户名", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
})
const router = useRouter();

let isRememberPW = ref(Boolean(getUserInfo()));
let loginBtnLoading = ref(false);

if(isRememberPW.value) {
  let { username, password } = JSON.parse(getUserInfo());
  ruleForm.username = username;
  ruleForm.password = password;
}

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (loginBtnLoading.value) return;
  if (!formEl) return;

  formEl.validate((valid, fields) => {
    if (valid) {
      loginBtnLoading.value = true;

      if (isRememberPW.value) {
        setUserInfo(JSON.stringify({ username: ruleForm.username, password: ruleForm.password }));
      } else {
        removeUserInfo();
      }
       // 这里对接登录接口，暂时不写,搞个假token用下
      setToken('affdsfarewfvdzf');
      ElMessage({
        message: '登录成功',
        type: "success",
      });
      router.push({ path: "/" });
    } 
  })
}

</script>

<style lang="less" scoped>
/* 登录页面的容器样式 */
.login-container {
  /* 设置容器宽度为100%，占满整个屏幕 */
  width: 100%;
  /* 设置容器高度为100vh(viewport height)，占满整个视口高度 */
  height: 100vh;
  /* 设置背景色为浅灰色 */
  background-color: #f1f4fd;
  /* 使用flex布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;

  /* 登录框的样式 */
  .login-box {
    /* 设置登录框的宽度为400px */
    width: 400px;
    /* 设置登录框的高度为300px */
    height: 300px;
    /* 设置登录框背景色为白色 */
    background-color: #fff;
    /* 设置圆角为10px，使四个角变得圆润 */
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

    .title {
      /* 设置标题字体大小为20px */
      font-size: 36px;
      /* 设置标题字体颜色为黑色 */
      color: #00a3cc;
      text-align: center;
      padding-top: 30px;
    }
    .login-form {
      padding: 30px 50px;
      .login-submit {
        margin-top: 10px;
       button {
        width: 100%;
       }
      }
    }
    
  }
}

</style>